---
id: 5dc1798ff86c76b9248c6eb3
title: 步骤 2
challengeType: 0
dashedName: step-2
---

# --description--

`h1` 到 `h6` 标题元素用于表明其下方内容的重要性。 数字越低，重要性越高，所以 `h2` 元素所具有的重要性要低于 `h1` 元素。

```html
<h1>most important heading element</h1>
<h2>second most important heading element</h2>
<h3>third most important heading element</h3>
<h4>fourth most important heading element</h4>
<h5>fifth most important heading element</h5>
<h6>least important heading element</h6>
```

每页只使用一个 `h1` 元素，并将重要性较低的标题放在重要性较高的标题之下。

在 `h1` 元素下方，添加带有以下文本的 `h2` 元素：

`Cat Photos`

# --hints--

你的 `h1` 元素应该有一个开始标签。 开始标签的语法是：`<elementName>`。

```js
assert(document.querySelector('h1'));
```

你的 `h1` 元素应该有一个结束标签。 结束标签在 `<` 字符之后有一个 `/`。

```js
assert(code.match(/<\/h1\>/));
```

你应该只有一个 `h1` 元素。 删除多余的。

```js
assert(
  document.querySelector('h1') && document.querySelectorAll('h1').length === 1
);
```

你的 `h1` 元素的文本应该是 “CatPhotoApp”。 你要么省略了文本，要么有错字。

```js
assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
```

你的 `h2` 元素应该有一个开始标签。 开始标签的语法是：`<elementName>`。

```js
assert(document.querySelector('h2'));
```

你的 `h2` 元素应该有一个结束标签。 结束标签在 `<` 字符之后有一个 `/`。

```js
assert(code.match(/<\/h2\>/));
```

你的 `h2` 元素中的文本应该是 “Cat Photos”。 仅将文本 `Cat Photos` 放在开始和结束 `h2` 标签之间。

```js
assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos');
```

你的 `h2` 元素应该放在 `h1` 元素下面。 `h1` 元素更重要，必须在 `h2` 元素之上。

```js
const collection = [...document.querySelectorAll('h1,h2')].map(
  (node) => node.nodeName
);
assert(collection.indexOf('H1') < collection.indexOf('H2'));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
--fcc-editable-region--
    <h1>CatPhotoApp</h1>

--fcc-editable-region--
  </body>
</html>
```

